<script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>
<!--指令的注册案例-->
<div id="app">
<div v-if="isExist" v-my-directive="params">
</div>
</div>
<script>
Vue.directive('my-directive',{
	bind:function(){
		console.log('bind',arguments);
	},
	update:function(newValue,oldValue){
		console.log('update',newValue,oldValue);
	},
	unbind:function(){
		console.log('unbind',arguments);
	}
});
var vm=new Vue({
	el:'#app',
	data:{
		isExist:true,
		params:'first'
	}
});
</script>
<!--vue指令可以用来进行dom聚焦以及一些共同验证的操作-->
<div id="app2">
	<input v-focus/>
</div>
<script>
Vue.directive('focus',{
	inserted:function(el){
		el.focus();
	},
	
});
var vm2=new Vue({
	el:'#app2',
	
});
</script>

<!--vue指令真正用途测试-->
<div id="app3">

<div v-demo-directive:red="message"></div>
</div>
<script>
Vue.directive('demoDirective',{
	bind:function(el,binding,vnode){
		el.style.color="#fff";
		el.style.backgroundColor=binding.arg;
		el.innerHTML="指令名称"+binding.name+"<br>指令绑定值"+binding.value+"<br>指令参数"+binding.arg+"<br>指令表达式"+binding.expression
	}
});
var vm3=new Vue({
	el:'#app3',
	data:{
		message:'Hello world'
	}
});
</script>
<!--经常使用传入对象进行操作-->
<div id="app4">
	<div v-object-do="myData"></div>
</div>
<script>
Vue.directive('objectDo',function(el,binding,vnode){
	console.log(binding.value);
	el.innerHTML=binding.value.name;
	//console.log();
});
var vm4=new Vue({
	el:'#app4',
	data:{
		myData:{
			name:'zjh',
			age:18,
			sex:'man'
		}
	}
});
</script>
<!--指令的高级 使用params-->
<div id="app5">
	<div v-dirparams :aer="message">
	{{message}}
	</div>
</div>
<script>
	Vue.directive('dirparams',{
		//params:['aer'],
		bind:function(el,binding,vnode){
			console.log(el.getAttribute('aer'));
			console.log(vnode);
		}
	});
	var vm5=new Vue({
		el:'#app5',
		data:{
			message:'data test'
			//params:'123'
		}
	});
</script>

